<template>
  <div id="app">
    <el-dialog title="注册" :visible.sync="dialogRegisterVisible">
      <el-form>
        <el-form-item label="用户名称" :label-width="formLabelWidth">
          <el-input v-model="user.username"></el-input>
        </el-form-item>
        <el-form-item label="用户密码" :label-width="formLabelWidth">
          <el-input v-model="user.password"></el-input>
        </el-form-item>
        <el-form-item label="电话号码" :label-width="formLabelWidth">
          <el-input v-model="user.phone"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogRegisterVisible = false">取消</el-button>
        <el-button type="primary" @click="register()">注册</el-button>
      </div>
   </el-dialog>

    <el-dialog title="修改" :visible.sync="dialogModifyVisible">
      <el-form>
        <el-form-item label="用户名称" :label-width="formLabelWidth">
          <el-input v-model="user.username"></el-input>
        </el-form-item>
        <el-form-item label="用户密码" :label-width="formLabelWidth">
          <el-input v-model="user.password"></el-input>
        </el-form-item>
        <el-form-item label="电话号码" :label-width="formLabelWidth">
          <el-input v-model="user.phone"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogModifyVisible = false">取消</el-button>
        <el-button type="primary" @click="modifyUser()">修改</el-button>
      </div>
   </el-dialog>

   <el-button type="primary" @click="dialogRegisterVisible = true">注册</el-button>


     <!-- 查询条件表单 -->
    <el-form class="actions" :model="filter" label-position="top" inline>
      <el-form-item>
        <el-input v-model="filter.username" placeholder="请输入姓名关键字" />
        <el-button @click="findUsersByName()">查询</el-button>
      </el-form-item>

      <el-form-item>
        
       
      </el-form-item>
    </el-form>

 
     <!-- el-table组件， 绑定了tableData数据 -->
    <el-table 
      style="width: 100%"
      border
      height="550"
      :data="userList"
      v-loading="loading">
        <!-- el-table-column  表示表格的每列,prop属性与模型数据中的key对应 ,label 列名 -->
        <el-table-column prop="uid" label="编号" width="180"> </el-table-column>
        <el-table-column prop="username" label="姓名" width="180"> </el-table-column>
        <el-table-column prop="password" label="密码"> </el-table-column>
        <el-table-column prop="phone" label="手机"> </el-table-column>
        <el-table-column prop="createtime" label="创建时间"> </el-table-column>
        
        <!-- @click="handleSelectRole(scope.row)" -->
        <el-table-column label="操作" align="center" min-width="120">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="deleteUser(scope.row)">删除</el-button>
            <el-button size="mini" type="text" @click="handleUpdate(scope.row)">修改</el-button>
          </template>
        </el-table-column>
    </el-table> 

  
   
  </div>
</template>

<script>
// import Index from './components/index.vue'

export default {
  name: 'App',
  components: {
  },
  data(){
    const filter={
      username:"",
    };
    return {
        userList:[
            ],//定义集合，保存从接口获取的参数
        filter,
        user:{username: "", password: "", phone: ""},//注册数据
        dialogRegisterVisible: false,
        dialogModifyVisible: false
    }
    },
    created(){
      //加载用户信息
      this.loadUsers();
    },
    methods:{
      //方法1：加载用户信息
      loadUsers(){
        return this.axios
        .get("http://192.168.0.104:8002/user/findAllUsers")
        .then(res =>{
          console.log(res);
          this.userList = res.data;
        })
        .catch(err =>{
          console.log(err)
          this.$message("获取用户信息失败！")
        })
      },
      //方法2：修改用户信息
      modifyUser(){
        this.axios
        .post("http://192.168.0.104:8002/user/modifyUser", this.user)
        .then(()  => {
            this.dialogModifyVisible=false;
            this.loadUsers();
          })
          .catch(err => {
            this.$message.error("操作失败! ! !");
          });
      },
      //方法3：删除用户信息
      deleteUser(row){
        this.axios
        .get("http://192.168.0.104:8002/user/deleteUser?uid=" + row.uid)
        .then(res => {
            this.loadUsers();
          })
          .catch(err => {
            this.$message.error("操作失败! ! !");
          });
      },
      //方法4：根据姓名查询用户信息
      findUsersByName(){
          this.axios
        .get("http://192.168.0.104:8002/user/findUsersByName?string=" + this.filter.username)
        .then(res => {
            this.userList = res.data;
          })
          .catch(err => {
            this.$message.error("操作失败! ! !");
          });
      },
      //方法5：注册用户
      register(){
       this.axios
        .post("http://192.168.0.104:8002/user/register", this.user)
        .then(()  => {
            this.dialogRegisterVisible=false;
            this.loadUsers();
          })
          .catch(err => {
            this.$message.error("操作失败! ! !");
          });
      },
       //方法6: 修改用户
      handleUpdate(row) {
        this.dialogModifyVisible = true;
        this.user = Object.assign({}, row); //回显
    },
    }
}
</script>

<style>

</style>
